<template>
    <div class="VonTestResult" :style="{borderRight:noBorder?'none':'1px solid white'}">
        <div class="top">
            {{title}}
        </div>
        <div class="content" v-if="!isBDU">
            <VonSmallTitle
                    style="margin-bottom: 20px"
                    v-if="barCode"
                    title="条形码："
                    content="PWT01010111100007651002021A220314337900023C"
                    :number="3">
            </VonSmallTitle>
            <slot name="subTitle"></slot>
        </div>
        <div class="rhythm"  v-if="!isBDU">
            <VonSmallTitle
                    title="测试节拍："
                    subTitle="40"
                    customColor="#1AFCFF"
            >
            </VonSmallTitle>
            <VonSmallTitle
                    title="检测总数："
                    subTitle="19"
                    customColor="#1AFCFF"
            >
            </VonSmallTitle>
            <VonSmallTitle
                    title="不合格数："
                    subTitle="1"
                    customColor="#FF451A"
            >
            </VonSmallTitle>
        </div>
        <div class="reset" v-if="!isBDU">
            <i class="el-icon-refresh"></i>清零
        </div>
        <slot name="BDU"></slot>
    </div>
</template>

<script>
  export default {
    name: "VonTestResult",
    props:{
      isBDU:{
        type:Boolean,
        default:false
      },
      title:{
        type:String,
        default:''
      },
      noBorder:{
        type: Boolean,
        default: false
      },
      barCode:{
        type:Boolean,
        default:false
      },
      subTitle:{
        type:String,
        default:''
      }
    },
  }
</script>

<style scoped lang="scss">
    .VonTestResult{
        height: 570px;
        position: relative;
        width: 33.2%;
        .top{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #336CB5;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #FFFFFF;
        }
        .rhythm{
            position: absolute;
            bottom: 90px;
            width: 100%;
        }
        .reset{
            color: white;
            left: 50%;
            transform: translateX(-50%);
            position: absolute;
            bottom: 20px;
            width: 100px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            background: linear-gradient(0deg, #3571BD, #84B7F8);
            border-radius: 4px;
        }
    }
</style>
